function Render(){}

$.extend(Render.prototype , {
    init : function(data1){
        console.log("i am render");
        this.container = $(".container");
        this.cate_tops = $(".cate-top");
        this.more      = $(".more");
        this.more_ul   = $(".more .more-ul");
        this.carousel_inner = $(".carousel-inner");
        this.row       = $(".comment-row");
       //商品列表的选择器
        this.breadcrumb= $(".breadcrumb");
       

        this.renderComment(data1);
    },
    renderStar : function(data){
        var connent = "";
        for(var i = 0 ,commits; commits = data[i]  ; i++){ 
//shop                
            connent += `<div class="col-xs-4">
                            <div class="figure">
                                <a href="./html/shop.html?#${commits.shop_id}" title="${commits.shop_name}" target="_blank">
                                    <img class="layz" data-original="${commits.shop_url} src="https://www.konka.com/public/images/29/2b/2a/4ca47b9d2f1d3c10bd85ae6e989e427104a946c5.png?96966_OW800_OH800">
                                </a>
                            </div>
                            <h4 class="text-uppercase ellipsis">${commits.shop_name}</h4>
                            <div class="figure-title ellipsis">${commits.short_name}</div>
                            <p>￥${parseInt(commits.price).toFixed(2)}          
                                <span class="del">&nbsp;￥${parseInt(commits.normal_price).toFixed(2)}</span>
                            </p>
                        </div>`
            
        }
        return connent;
    },
    renderComment : function(data){     
        // console.log(data)
        //data就是一个数组
        // console.log(this.cate_tops[1]); 元素
        for (var i = 0 ; i < data.length;i++){
            var cate_top = "";
            var more_li  = "";
            var big_img = "";
            var connent = "";
            //渲染carttop
            cate_top = `<h3>
                            <img src="${data[i].h3_url}">
                            <a href="#" title="${data[i].h3_title}" target="_blank">${data[i].h3_title}</a>
                        </h3>`
            $(cate_top).insertBefore(this.more[i+1]);
            //渲染标题右边的超链接
            var data_li = data[i].more_ul;
            for(var j = 0 ; j < data_li.length ; j++){
                more_li +=`<li>
                                <a href="#" title="${data_li[j]}" target="_blank">${data_li[j]}</a>
                                <span>/</span>
                            </li>`
                            // console.log(data_li[j])
            }
            more_li += `<li>
                            <a href="#" title="更多>>" target="_blank" style="color: rgb(255, 91, 87);">更多&gt;&gt;</a>
                            <span> </span>
                        </li>`;
            $(this.more_ul[i]).html(more_li);
 //shop     //渲染那张大图片
            big_img = `<div class="item active">
                            <a href="./html/shop.html?#${data[i].goods_id}" title="" target="_blank">
                                <img class="layz banW" data-original="${data[i].big_url}" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4519644,645929689&fm=26&gp=0.jpg" style="display: block;">
                            </a>
                        </div>` 
            $(this.carousel_inner[i+1]).html(big_img);
            //渲染下边八个盒子
            var commits = data[i].goods_shops;           
            for( var attr in commits){
//shop
                connent += `<div class="col-xs-3">
                                <div class="figure">
                                    <a href="./html/shop.html?#${commits[attr].shop_id}" title="${commits[attr].shop_name}" target="_blank">
                                        <img class="layz" data-original="${commits[attr].shop_url}" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4519644,645929689&fm=26&gp=0.jpg" style="display: inline;">
                                    </a>
                                </div>
                                <h4 class="text-uppercase ellipsis">${commits[attr].shop_name}</h4>
                                <div class="figure-title ellipsis">${commits[attr].short_name}</div>
                                <p class="price">￥${parseInt(commits[attr].price).toFixed(2)}      
                                    <span class="del">&nbsp;￥${parseInt(commits[attr].normal_price).toFixed(2)}</span>
                                </p>
                                <div class="wrapper text-left" style="display: none;">
                                    <p class="satis-show"></p>
                                    <div class="text-warning satisfaction" data-commen="3.00000" style="background-position: -60px 0px;"></div>
                                </div>
                            </div>`
            }
            $(this.row[i]).html(connent);
        }

    },
    renderShop : function(data,id){
        
        if(id > 44){
            var html = "";
            for(var attr in data){
                if(data[attr].shop_id == id){
                    // console.log(data[attr]);
                    html = `<li><a href="https://www.konka.com/list.html?cat_id=82">${data[attr].shop_title}</a></li>
                            <li><a href="https://www.konka.com/list.html?cat_id=92">4K电视</a></li>
                            <li class="active">${data[attr].short_name.replace(/\//g," ")}</li>`;                         
                    $(".breadcrumb").html(html);

                    html = `<a href="${data[attr].shop_url}" target="_blank" data-id="${data[attr].shop_id}">
                                <img src="${data[attr].shop_url}" alt="${data[attr].short_name}">
                            </a>
                            <img src="${data[attr].shop_url}" class="zoomImg id-d76550b2f3a5f71480c3106466bedaab">
                            `
                    $(".product-main-image").html(html);
                    html = "";
                    for(var i = 0 ; i ++ <3; ){
                        html += ` <li class="">
                                    <a href="${data[attr].shop_url}" data-middlesrc="${data[attr].shop_url}" target="_blank" data-id="${data[attr].shop_id}">
                                        <img src="${data[attr].shop_url}">
                                    </a>
                                </li>`
                    }
                    $(".list-inline").html(html);

                    html  = `<h3>${data[attr].short_name.replace(/\//g," ")} </h3>
                            <div>${data[attr].shop_name}  </div>
                            <div class="price-availability-block clearfix">
                                <span class="price">
                                    <strong>￥${parseInt(data[attr].price).toFixed(2)}</strong>
                                    <span style="text-decoration:line-through;color:#b0b0b0;">￥${parseInt(data[attr].normal_price).toFixed(2)}</span>
                                </span>
                                <a href="javascript:;" class="pruchase">
                                    <span><i class="glyphicon glyphicon-qrcode" style="margin-right: 5px;"></i>手机购买</span>
                                    <img src="https://www.konka.com/openapi/qrcode/encode/size/5/margin/5?txt=https%3A%2F%2Fwww.konka.com%2Fm%2Fitem-711.html" class="x-qrcode">          
                                </a>
                            </div>`
                    $(html).insertBefore($(".addressWrap"));
                } 
            }
        }
        if(id <= 44){          
            var html = "";
            // console.log(data[0].goods_shops);
            for(var attr = 0; attr < data.length ; attr ++){
                for(var i = 0 ; i < data[attr].goods_shops.length ; i++){
                    if(data[attr].goods_shops[i].shop_id == id){
                        html = `<li><a href="https://www.konka.com/list.html?cat_id=82">${data[attr].h3_title}</a></li>
                                <li><a href="https://www.konka.com/list.html?cat_id=92">4K电视</a></li>
                                <li class="active">${data[attr].goods_shops[i].short_name.replace(/\//g," ")}</li>`;                         
                        $(".breadcrumb").html(html);

                        html = `<a href="${data[attr].goods_shops[i].shop_url}" target="_blank" data-id="${data[attr].goods_shops[i].shop_id}">
                                    <img src="${data[attr].goods_shops[i].shop_url}" alt="${data[attr].goods_shops[i].short_name}">
                                </a>
                                <img src="${data[attr].goods_shops[i].shop_url}" class="zoomImg id-d76550b2f3a5f71480c3106466bedaab">
                                `
                        $(".product-main-image").html(html);
                      
                        html = ` <li class="current">
                                    <a href="javascript:void(0);" data-middlesrc="${data[attr].goods_shops[i].shop_url}" target="_blank" data-id="${data[attr].goods_shops[i].shop_id}">
                                        <img src="${data[attr].goods_shops[i].shop_url}">
                                    </a>
                                </li>`
                        for(var i = 0 ; i ++ <3; ){
                            html += ` <li class="">
                                        <a href="javascript:void(0);" data-middlesrc="${data[attr].goods_shops[i].shop_url}" target="_blank" data-id="${data[attr].goods_shops[i].shop_id}">
                                            <img src="${data[attr].goods_shops[i].shop_url}">
                                        </a>
                                    </li>`
                        }
                        $(".list-inline").html(html);

                        html  = `<h3>${data[attr].goods_shops[i].short_name.replace(/\//g," ")} </h3>
                                <div>${data[attr].goods_shops[i].shop_name}  </div>
                                <div class="price-availability-block clearfix">
                                    <span class="price">
                                        <strong>￥${parseInt(data[attr].goods_shops[i].price).toFixed(2)}</strong>
                                        <span style="text-decoration:line-through;color:#b0b0b0;">￥${parseInt(data[attr].goods_shops[i].normal_price).toFixed(2)}</span>
                                    </span>
                                    <a href="javascript:;" class="pruchase">
                                        <span><i class="glyphicon glyphicon-qrcode" style="margin-right: 5px;"></i>手机购买</span>
                                        <img src="https://www.konka.com/openapi/qrcode/encode/size/5/margin/5?txt=https%3A%2F%2Fwww.konka.com%2Fm%2Fitem-711.html" class="x-qrcode" >          
                                    </a>
                                </div>`
                        $(html).insertBefore($(".addressWrap"));
                    } 

                }
            }
        }
    },
    renderCart : function(data){
        var tempArr = [];
        var locals = localStorage.getItem("carts");
        locals = JSON.parse(locals);
        // console.log(locals)
        if(locals === null) return false;
        //咳咳 感觉这个循环被看见要被打死
        //先就这吧 谁让自己json设计出问题了
        for (var m = 0 ; m < locals.length ;m++){
            if(locals[m].id > 44){
              x:  for(var i = 0 ; i < data.goods_star.length ; i++){
                    if(locals[m].id == data.goods_star[i].shop_id){
                        data.goods_star[i].count = locals[m].count;
                        tempArr.push(data.goods_star[i]);
                        break x;
                    }
                }
            }
            else{
               y: for(var i = 0 ; i < data.goods_list.length ; i++){
                    for(var j = 0 ; j < data.goods_list[i].goods_shops.length ; j++){
                        if(locals[m].id == data.goods_list[i].goods_shops[j].shop_id){
                            data.goods_list[i].goods_shops[j].count = locals[m].count;
                            tempArr.push(data.goods_list[i].goods_shops[j]);
                            break y;
                        }
                    }
                }

            }
            
        }
        // console.log(tempArr);
        
        var html = "";
        var sum_count = 0;
        var sum_price = 0;
        tempArr.forEach($.proxy(function(item){
            sum_count += item.count;
            sum_price += item.price * item.count;
            html += `<div class="row cart-item">
                        <div class="col-xs-1 c-ci-check">
                            <label class="control-label">
                                <input type="checkbox" checked="true">&nbsp;&nbsp;&nbsp;&nbsp;
                            </label>
                        </div>
                        <div class="col-xs-5 c-ci-title">
                            <div class="row">
                                <div class="col-xs-3">
                                    <a href="https://www.konka.com/LED65D6.html">
                                        <img class="img-thumbnail" src="${item.shop_url}" alt="${item.shop_name}">
                                    </a>
                                </div>
                                <div class="col-xs-9">
                                    <h5><a href="https://www.konka.com/LED65D6.html">LED65D6  65吋4K超高清 国品电视</a></h5>
                                    <p class="spec-info" style="margin-bottom: 0;">${item.shop_title}</p>
                                    <p data-brief="544" class="brief" style="margin-bottom: 0;">${item.short_name.replace(/\//g," ")}</p>                          
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-1 c-ci-price" data-bind="item/product/buy_price">${parseInt(item.price).toFixed(2)}</div>
                        <div class="col-xs-2 c-ci-quantity">
                            <div class="product-quantity input-group input-group-sm" shop-id="${item.shop_id}">
                                <div class="spinner-buttons input-group-btn">
                                    <button type="button" class="btn btn-default btn-reduce">
                                    -
                                    </button>
                                </div>
                                <input type="text" class="spinner-input form-control" value="${item.count}" data-now="1">
                                <div class="spinner-buttons input-group-btn">
                                    <button type="button" class="btn btn-default btn-add">
                                    +
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-1 c-ci-amount">
                            <strong data-bind="amount">${parseInt(item.price * item.count).toFixed(2)}</strong>
                        </div>
                        <div class="col-xs-2 c-ci-opt">
                            <ul class="list-unstyled">
                                <li>
                                    <a href="javascript:;"  class="btn btn-link btn-xs" data-id="${item.shop_id}">删除</a>
                                </li>
                            </ul>
                        </div>
                    </div>`;
                
        },this))      
        // console.log(sum_count,sum_price)
        var str = `<ul class="list-unstyled">
                        <li>
                            已选择<span data-bind="goods_count">${sum_count}</span>件商品,优惠后金额 ：

                            <strong class="text-danger" data-bind="finally_cart_amount" style="color:#ed1c24;">${sum_price.toFixed(2)}</strong>
                        </li>
                    </ul>`;

        return {
            html,str
        };
    }
})

export default new Render();